/* 整體配置 */

#wrapper {
	position: relative;
	overflow: hidden;
}


html{
	height: 100%;
	font-size: 100%;
	font-family:"微軟正黑體",Arial, Helvetica;
}

body{
	height: 100%;
	font-size: 1em;
	font-family:"微軟正黑體",Arial, Helvetica !important;
}

img {
    max-width: 100%;}

h1,h2,h3{
	font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
	line-height: 100%;
}

p {line-height: 100%;
	margin: 0;
}

/* span{
	line-height: 100%;
} */

li{
	list-style:none;
}

ul{
	margin: 0;
}

a{
    text-decoration: none !important;
}

input{
    outline: none;
}

textarea{
    outline: none;
}

@media screen and (max-width: 768px){
    .container {padding-right: 30px;padding-left: 30px;}
}

/* 區塊淡入 */
.visible{
    opacity: 1;
}

.hidden1{
    opacity: 0 ;
}

.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}


@-webkit-keyframes fadeInUp1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp1 {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp1 {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp1 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated.fadeInUp1 {
    -webkit-animation-name: fadeInUp1;
    -moz-animation-name: fadeInUp1;
    -o-animation-name: fadeInUp1;
    animation-name: fadeInUp1;
    animation-delay: 0.4s;
}



/* banner */
.rwd-page-banner {
    background: url(../images/rwd_page_banner.jpeg) no-repeat;
    background-size: cover;
    color: #282828;
    padding: 125px 0;
    padding-top: 200px;
    background-position: center center; 
}

@media (max-width: 800px){

}

h2.rwd-titstyle01 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 2px;
    color: #282828;
    margin-top: 0px; 
}

.banner-line {
    display: block;
    width: 50px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 20px;
    margin-bottom: 37px;
}

h2.rwd-titstyle02 {
    font-size: 32px;
    letter-spacing: 2px;
    font-weight: 600;
}

h2.rwd-titstyle02 span{
    font-size: 20px;
}

h2.rwd-titstyle02 span {
    position: relative;
    bottom: 6px;
    left: 5px;
}

h1.rwd-titstyle02 {
    font-size: 44px;
    color: #e74185;
    margin-bottom: 0px;
    font-weight: 600;
    margin-top: 14px;
}

.br-hidden{display: none;}

@media screen and (max-width: 1024px) {
    .rwd-page-banner{background-position: 65%;}
}

@media screen and (max-width: 600px) {
    h2.rwd-titstyle01{font-size: 16px;}
    h2.rwd-titstyle02{font-size: 28px;}
    h2.rwd-titstyle02 span{bottom: 2px;left: -3px;}
    h1.rwd-titstyle02{line-height: 44px;font-size: 38px;}
    .rwd-page-banner{height: 100%;padding:65px 0;background-position: 65% 0px;padding-top:100px;}
    .br-hidden{display: block;}

}
@media screen and (max-width:480px) {
    h2.rwd-titstyle02 span {bottom: 1px;}
    .br-hidden{display: none;}
}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 600px) 
and (orientation : landscape){
    .rwd-page-banner {height: 100vh;padding: 50px 0;}
}

/* 全面迎接 */

#page-rwd02{
    padding: 100px 0;
}

.rwd-content01{
    text-align: center;
}

.rwd-content01 h1{
    font-size:40px;
    font-weight: 600;
    margin: 0px;
}

.rwd-content01 h2{
    font-size:30px;
    font-weight: 600;
}

span.pr02-l {
    display: block;
    background: #e0e0e0;
    width: 50px;
    height: 3px;
    margin: auto;
    margin-top: 47px;
    margin-bottom: 43px;
}

.rwd-content01 i{
    display: block;
}

.rwd-content01 i:nth-child(4){
    font-size:22px;
    display: block;
    color: #5a5a5a;
}

.rwd-content01 i:nth-child(5){
    padding-top: 13px;
    font-size: 14px;
    color: #9c9c9c;
}

.rwd-content01 p{
    font-size: 16px;
    line-height: 30px;
    color: #9c9c9c;
}

.rwd-content01 p:nth-child(6){
    padding-top: 45px;
    color: #9c9c9c;
}

@media screen and (max-width: 600px ) {
    .rwd-content01 h2{font-size: 16px;line-height: 22px;}
    .rwd-content01 i:nth-child(4){font-size: 20px;position: relative;left: -6px;}
    .rwd-content01 p{font-size: 14px;}
    .rwd-content01 i:nth-child(5){font-size: 13px;line-height: 20px;}
    .rwd-page-banner {height: 100%;padding-top: : 65px ; padding-bottom: 85px;background-position: 65% -18px;}
    .rwd-content01 h1 {font-size: 34px;line-height: 40px;}
    #page-rwd02{padding-top: 80px;}
}

@media screen and (min-width : 380px) and (max-width : 600px)  {
    .rwd-page-banner {height: 100%;padding: 65px 0;padding-top: 100px;}
    h2.rwd-titstyle02 span:nth-child(1) {display: block;}
    h1.rwd-titstyle02 {margin-top: 15px;}
    span.br-hidden br {display: none;}
}

/*什麼是響應式*/
#page-rwd03{
    background-color: #f4f4f4;
    padding: 100px 0;
}

.rwd-content02 h1 {
    font-size: 34px;
    padding-bottom: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 600;
    color:#353535;
}

.rwd-content02 p{
    font-size: 16px;
    line-height: 28px;
    color:#9c9c9c;
}

.up02-l p:nth-child(2) {
    padding-bottom: 32px;
    color: #9c9c9c;
}

.up02-r {
    padding-top: 10px;
}

.up02-r p{
    font-size: 12px;
    padding-top: 16px;
    text-align: center;
    color:#666;
}

.content02-up {
    padding-bottom: 65px;
    border-bottom: 1px solid #d2d2d2;
}

.r-in{
    text-align: center;
}

.r-in p{
    color:#000;
}

.r-in img{
    padding-bottom: 25px;
    width: 100px;
}

.content02-down{
    padding-top: 80px;
}

.down-l h1{
    font-weight: 600;
    font-size: 48px;
}

.down-l h2{
    font-weight: 600;
    font-size: 42px;
}

@media screen and (min-width: 769px ) {
    .up02-r {float: right;}
}

@media screen and (max-width: 768px ) {
    .up02-l { text-align: center;padding-top: 45px;}
    .up02-r {text-align: center;}
    .down-l {text-align: center;}
    .down-r{padding-top: 45px;}
}

@media screen and (max-width: 600px ) {
    .rwd-content02 h1{font-size: 24px;}
    .rwd-content02 p{font-size: 16px;}
    .down-r{padding-top: 35px;}
    .r-in{padding-bottom: 35px;}
    .down-l h2{font-weight: 600; font-size: 30px;}
    .down-l h1{font-weight: 600; font-size: 36px;}
}

/*更多採用RWD網站*/
#page-rwd04{
    padding: 100px 0;
}

.rwd-content03{
    text-align: center;
}

.rwd-content03 h1{
    font-size: 34px;
    padding-bottom: 100px;
    font-weight: 600;
}



.content03-in h2{
    font-size: 22px;
    padding-top: 15px;
    padding-bottom: 22px;
    margin-bottom: 0px;
    color: #353535;
    margin-top: 0px;

}

.content03-in p{
    font-size: 14px;
    color:#9e9d9d;
    line-height: 26px;
    padding: 0px 50px;
}

.content03-up img{
    width: 70px;
}

@media screen and (min-width:1024px){
    div.col-md-4.col-md-offset-1.content03-in {margin-left: 17%;padding-top: 70px;}
    div.col-md-4.col-md-offset-2.content03-in {margin-left: 0%;padding-top: 70px;}
    .content03-up {padding-bottom: 75px;}

}

@media screen and (max-width:768px){
    .content03-in {padding-bottom: 65px;}
    .col-md-4.col-md-offset-1.content03-in.col-sm-6 {padding-bottom: 95px;}
}

@media screen and (max-width:600px){
    .rwd-content03 h1{font-size: 30px;padding-bottom: 40px;line-height: 40px;margin-top: 0px;}
    .content03-in p{display: none;}
    .content03-in h2{font-size: 18px;letter-spacing: 2px;line-height: 26px;}
    .content03-in{padding-bottom: 28px;}
    .col-md-4.col-md-offset-1.content03-in.col-sm-6{padding-bottom: 30px;}
    #page-rwd04{padding-bottom: 70px;}
    .content03-in{padding-bottom: 0px;}
}

/*作品輪播*/
#page-rwd05{
    background:#f4f4f4; 
    padding: 100px 0;
}

h1.pr05-tit {
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    padding-bottom: 60px;
    margin: 0px;
}

.owl-theme .owl-nav.disabled+.owl-dots{
    margin-top: 20px !important;
}

@media screen and (max-width:600px){
    h1.pr05-tit{padding-bottom: 40px;font-size: 30px;}
}

/*響應行動世代*/

#page-rwd06 {
    background: url(../images/rwd06_bg.jpeg);
    background-size: cover;
    padding: 130px 0;
    background-position: 0px -42px;
}


.rwd-content05 h1{
    font-size: 50px;
    color: #e84186;
    padding-bottom: 24px;
    margin-bottom: 0px;
    font-weight: 600;
    margin: 0px;
}

.rwd-content05 p{
    font-size: 22px;
    color: #282828;
    font-weight: 600;
}

@media screen and (max-width:1024px){
    #page-rwd06{background-position: 43% 0%;background-size: 220%;}
} 

@media screen and (max-width:600px){
    .rwd-content05 h1{font-size: 34px;}
    .rwd-content05 p{font-size: 18px;line-height: 30px;}
    #page-rwd06{padding: 80px 0;background-position: 47% -5px;background-size: cover;}
} 

/*
@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
        #page-rwd06 {background-position: 43% 0%;}
    }*/

/* 限時特惠 */

#page-rwd07{
    padding: 100px 0 ;
    background: #f4f4f4;
    padding-bottom: 180px;
    display: none;
}


h1.pr07-tit {
    color: #353535;
    font-weight: 600;
    text-align: center;
    padding-bottom: 60px;
}

.pr07-box-bg01 {
    width: calc(100%/5);
    float: left;
    height: 216px;
    padding-top: 140px;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-box-bg01 {
            height: auto;
            padding-top: 130px;
        }
    }




@media (max-width: 1199px){
    #page-rwd07{padding-bottom: 150px;}
    .pr07-content > div:nth-child(1){
    }

    .pr07-content > div:nth-child(1) .pr07-ct01{
        padding-top: 0px;
        font-size: 22px;
    }
}

.pr07-content > div:nth-child(2){
    background: #fff;
    padding: 30px;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-content > div:nth-child(2){
            padding: 10px;
        }
    }

.pr07-content > div:nth-child(3){
    background: #fff3f7;
    padding: 30px;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-content > div:nth-child(3){
            padding: 10px;
        }
    }


.pr07-content > div:nth-child(4){
    background: #ffe6f1;
    padding: 30px;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-content > div:nth-child(4){
            padding: 10px;
        }
    }

.pr07-content > div:nth-child(5){
    background: #e84186;
    padding: 30px;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-content > div:nth-child(5){
            padding: 10px;
        }
    }


.pr07-content > div:nth-child(5) > .pr07-text01{
    color:#fff;
}

.pr07-content > div:nth-child(5) > .pr07-nt{
    color:#fff;
}

.pr07-content > div:nth-child(5) > .pr07-price{
    color:#fffe00;
}


.pr07-box-bg02 {
    width: calc(100%/5);
    float: left;
    padding-top: 72px;
}

.pr07-box-bg03 {
    width: calc(100%/5);
    float: left;
    padding-top: 35px;
}

.pr07-detail-text>div>ul>li{
    list-style: disc;
}

.pr07-detail-text>div>ul>li>span{
    color:#616161;
}

.pr07-detail-text>div>ul>li:nth-child(even) {
    color: #e84185;
}

.pr07-ul.clearfix{
    padding-left: 36px;
}

ul.pr07-dt01 {
    float: left;
}

ul.pr07-dt01 li{
    font-size: 15px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

ul.pr07-dt02 {
    float: left;
    margin-left: 60px;
}

ul.pr07-dt02 li{
    font-size: 14px;
    margin-bottom: 10px;
}


ul.pr07-dt03 {
    float: left;
    margin-left: 60px;
}

ul.pr07-dt03 li{
    font-size: 14px;
    margin-bottom: 10px;
}

.pr07-ct01{
    text-align: center;
    font-size: 22px;
}

.pr07-ct01 p {
    font-size: 14px;
    padding-top: 4px;
}

.pr07-text01{
    text-align:center;
    font-size: 26px;
    letter-spacing: 2px;
}

    /* pad */
    @media (max-width: 1199px){

        .pr07-box-bg03{
            padding-top: 29px;
        }

        .pr07-text01{
            font-size: 20px;
            padding-top: 35px;
        }
    }


.pr07-nt{
    font-size: 12px;
    margin-top: 45px;
    padding-left: 35px;
}


    /* pad */
    @media (max-width: 1199px){
        .pr07-nt{
            margin-top: 35px;
            padding-left: 20px;
        }
    }

    @media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) 
        and (orientation : landscape) {
                .pr07-nt{padding-left: 46px;}
    }

.pr07-price{
    font-size: 32px;
    text-align:center;
    font-weight: bold;
}

    /* pad */
    @media(max-width: 1199px){
       .pr07-price{
            font-size: 24px;
        } 
    }

.pr07-detail-text{
    float:left;
    background-color: #fff;
    width: 80%;
    padding: 40px 50px;
    color:#616161;
}

.pr07-total{
    text-align: center;
}

    /* pad */
    @media (max-width: 1199px){
        .pr07-total{
            font-size: 16px;
        }
    }

.pr07-total div:nth-child(2){
    background-color: #fff;
    padding: 30px;
    font-size: 24px;
}

.pr07-total div:nth-child(3){
    background-color: #fff3f7;
    padding: 30px;
    font-size: 24px;
}

.pr07-total div:nth-child(4){
    background-color: #ffe6f1;
    padding: 30px;
    font-size: 24px;
}

.pr07-total div:nth-child(5){
    background-color: #e84186;
    padding: 30px;
    font-size: 24px;
    color:#fff;
}

.pr07-tb {
    position: absolute;
    right: 13px;
    background: #fff;
    padding: 14px 25px;
    box-shadow: 0px 5px 13px 1px rgba(0, 0, 0, 0.05);
    bottom: -82px;
}

.pr07-tb:after {
    content: "▲";
    position: absolute;
    top: -21px;
    text-shadow: 0px -6px 9px rgba(0, 0, 0, 0.1);
    right: 97px;
    font-size: 20px;
    color: #fff;
    transform: scaleX(2.1);
}

.tb01{font-size: 18px;}

.tb02{font-size: 14px;}

.tb03{font-size: 20px;color: #e84186;padding-top: 6px;}

@media (max-width: 1024px){
    .pr07-tb {bottom: -88px;}
}


@media (min-width: 1024px){
    .pr07-detail-text{box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);width: 82%;position: relative;left: 12px}
    .pr07-box-bg02{width: 18%;}
}

@media (max-width: 600px){
    h1.pr07-tit{font-size: 26px;margin-top: 0px;}
}

/*phone*/

.pr07-m01{background: #fff;}

.m-tit{text-align: center;font-size: 30px;padding: 60px 0;}

.m-ct{width: 95px;margin: auto;}

.pr07-m02 {background: #fff3f7;}

.pr07-m03 {background: #ffe6f1;}

.pr07-m04 {background: #e84186;color: #fff;}

.pr07-m-bg {box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.05);}

p.m-text{padding-bottom: 15px;}

p.m-nt{font-size: 14px;padding-bottom: 12px;}

p.m-pri{font-size: 30px;padding-bottom: 40px;font-weight: 600;}

span.m-l {display: block;height: 2px;background: #dcdcdc;width: 50px;}

p.m-tot{padding-top: 35px;padding-bottom: 15px}

p.m-tot-pri {padding-bottom: 65px;font-size: 20px;}

.pr07-m04 > div.m-ct > span {background: #a64c70;}

.pr07-m04 > div.m-ct > p:nth-child(3) {color: #fefe00;}

/* 立即掌握行動商機 */

section#page-rwd08 {
    background: #e84185;
    background: -moz-linear-gradient(top, #e84185 0%, #544185 100%);
    background: -webkit-linear-gradient(top, #e84185 0%,#544185 100%);
    background: linear-gradient(to bottom, #e84185 0%,#544185 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e84185', endColorstr='#544185',GradientType=0 );
}

#page-rwd08 {
    padding-top: 100px;
    padding-bottom: 80px;
}

h1.pr08-tit{
    font-size: 34px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0px;
}

p.pr08-text{
    font-size: 22px;
    margin-bottom: 0px;
    color:#fff;
    text-align: center;
    padding-bottom: 70px;
}

.pr08-box {
    width: 720px;
    margin: auto;
}

.pr08-box-in {
    color: #fff;
    width: 500px;
    margin: auto;
    padding: 20px 0;
}

.pr08-box-in img {
    padding-right: 25px;
}

.pr08-box-line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}    

.pr08-box > div:last-child {
    border-bottom: none;
}

@media (max-width: 650px){
    h1.pr08-tit {font-size: 30px;}
    p.pr08-text{font-size: 20px;line-height: 30px;}
    .pr08-box-in{width: 100%;}
    .pr08-box{width: 100%;}
    .pr08-box-in span{display: block;font-size: 14px;line-height: 26px;}
    .pr08-box-in img{float: left;padding-right: 25px;padding-bottom: 12px;position: relative;top: 6px;}
}

/* 與我們聯絡 */

h1.pr09-tit {
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding-bottom: 30px;
    margin: 0px;
}

.contact input {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.6);
    border-radius: 50px;
    border: none;
    padding: 5px 20px;
    font-size: 14px;
    width: 400px;
    max-width: 100%;
}

.contact textarea {
    height: 80px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.6);
    border-radius: 18px;
    border: none;
    padding: 5px 20px;
    font-size: 14px;
    width: 400px;
    max-width: 100%;
}

.contact p {
    text-align: center;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.con-btn {
    text-align: center;
}

.con-btn button{
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 35px;
    width: 200px;
    font-size: 14px;
    position: relative;
    z-index: 999;
    height: 35px;
    z-index: 1;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    background: #e84185;
    opacity: 0.7;
}

.con-btn button:hover {
    opacity: 1;
}

.contact {
    padding: 100px 0;
    background: url(../images/c-bg.png) no-repeat;
    background-size: cover;
}

.contact input::-webkit-input-placeholder{
    color: #0d0608;
}

.contact textarea::-webkit-input-placeholder{
    color: #0d0608;
}

@media screen and (max-width: 600px) {
    .contact {padding: 60px 0;}
    .contact input{padding: 5px 15px;}
    .contact textarea{padding: 5px 15px;}
    .contact p{line-height: 26px;}
    h1.pr09-tit{font-size: 30px;}
}







/*SSL*/
.update.ssl {
    padding: 120px 0;
    padding-top: 0;
}

@media screen and (max-width: 992px) {
    .update{padding: 80px 0;}
}

@media screen and (max-width: 480px) {
    .update{padding: 60px 0;}
}


body > main > section:nth-child(8) > div{
    padding-bottom: 120px;
}